<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期</title>
</head>
<body>
    <div id="app">
        <input type="button" value="修改msg" @click="msg='No'">
        <h3 id="h3">{{msg}}</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <script>
        //创建 Vue实例 ，得到View Model
    var vm= new Vue({
        el:'#app',
        data:{
            msg:'ok'
        },
        methods:{
            show(){
                console.log('执行了show方法')
            }
        },
        beforeCreate(){//实例完全被创建出来之前，会执行它
            // console.log(this.msg)
            // this.show()
            // 注意：data 和 methods 中的数据都还没有初始化
        },
        created(){//实例完全被创建出来之前，会执行它
            // console.log(this.msg)
            // this.show()
            // 注意：data 和 methods 中的数据和方法都已经初始化好了
            //如果要调用methods中的方法或者操作data中的数据最早只能在created中操作
        },
        beforeMount(){//此函数执行时，模板已经在内存中编译好了，但是尚未挂在到页面中去，此时，页面还是旧的
            // console.log(document.getElementById('h3').innerText)
            //页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
        },
        mounted(){//表示内存中的模板已经真实的挂在到页面中，用户可以看到渲染好的页面了
            // console.log(document.getElementById('h3').innerText)
            //注意：mounted 是实例创建期间的最后一个生命周期函数，当执行完mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例就静静的 躺在我们的内存中，一动不动

            //如果要用某些插件操作dom 最早要在mounted 中操作
            //只要执行了mounted ，就表示整个vue实例已经初始化好了，组件已经脱离创建阶段，进入运行阶段
        },


        
        //下面是 组件运行阶段 的生命周期函数 
        beforeUpdate(){//此时界面还还没被更新，【数据被更新了】
            // console.log('界面上元素的内容是'+document.getElementById('h3').innerText)
            // console.log('data 中的数据是'+this.msg)
            //得出结论：页面中显示的数据，还是旧的
        },
        //这一步执行的是：先根据data中的最新的数据，在内存中，重新渲染出一份最新的 内存DOM树，
        //当最新的内存 DOM树 被更新之后，会把最新的内存DOM树  重新渲染到真是的页面中去，这时候，就完成了数据从  data(Model层) ---> view（视图层）的更新
        updated(){
            console.log('界面上元素的内容是'+document.getElementById('h3').innerText)
            console.log('data 中的数据是'+this.msg)
            //页面和data数据已经保持同步了
        },
        beforeDestroy(){
            //执行此钩子函数时候，Vue实例就已经从运行阶段，进入到了销毁阶段；
            //当执行beforeDestroy 的时候，实例身上的所有的data 和所有的methods,以及过滤器，指令。。。都属于可用状态，此时还没有真正执行销毁的过程
        },
        destroyed(){
            //当执行到destroyed 函数的时候，组件已经被完全销毁了，此时组件中所有的都不可用
        }

    })
    </script>
</body>
</html>

